<template>
  <div class="notices-content">
    <!-- 公告列表 -->
    <div class="content">
      <!-- 每一项 -->
      <div
        class="content-item"
        v-for="(item, index) in pageList"
      >
        <div class="left">
          <div class="title">
            <h3 @click="gotoDetail(item._id)">
              {{ item.title }}
              <span style="color: red" v-if="item._id===$route.query.newId"> (最新)</span>
            </h3>
          </div>
          <div class="info">
            <span>
              <el-icon class="icon"><Avatar /></el-icon>发布者：{{ item.publisher }}
            </span>
            <span>
              <el-icon class="icon"><StarFilled /></el-icon>接收者：{{ subscriber(item.subscriber) }}
            </span>
            <span>
              <el-icon class="icon"><Timer /></el-icon>发布日期：{{ item.pub_date }}
            </span>
          </div>
        </div>
        <div class="right">
          <span class="go" @click="gotoDetail(item._id)">查看详情</span>
        </div>
      </div>
      <!-- 没有公告列表时展示 -->
      <div class="null" v-if="!pageList.length">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <!-- 底部分页 -->
    <div class="footer">
      <el-pagination
        :current-page="page.page_num"
        :page-size="page.page_size"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageListCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { watch, ref, computed } from 'vue'
import { Timer, Avatar, StarFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const props = defineProps({
  page: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['pageInfoChange', 'update:page'])

const store = useStore()
const router = useRouter()

// 当页数发生变化，就通知父组件查询数据
watch(
  () => props.page,
  (newVal) => {
    emit('pageInfoChange', newVal)
  },
  {
    immediate: true
  }
)

// 刷面刷新，第一次根据name（空值）进行查询，后面则根据查询条件和分页参数进行查询
const getPageList = async (formValue, pageInfo) => {
  // 查找用户数据
  store.dispatch('noticesManageModule/getMyNoticesAction', { ...formValue, ...pageInfo, subscriber:store.state.userModule.userInfo.role})
}

// 数据列表
const pageList = computed(() => store.state.noticesManageModule.myNoticesList)

// 数据列表数量
const pageListCount = computed(() => store.state.noticesManageModule.myNoticesCount)

// 转换接收对象
const subscriber = (num) => {
  return num === '0' ? '管理员' : num === '1' ? '教师' : num === '2' ? '学生' : '所有人'
}

// 分页参数发生变化的事件
const handleSizeChange = (page_size) => {
  emit('update:page', { ...props.page, page_size })
}

const handleCurrentChange = (page_num) => {
  emit('update:page', { ...props.page, page_num })
}

// 前往公告详情页
const gotoDetail = (id) => {
  router.push(`/home/message/notices/${id}`)
}

defineExpose({
  getPageList
})
</script>

<style lang="less" scoped>
.notices-content {
  .content {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    .content-item {
      padding: 5px 10px 30px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #eaeeef;
      position: relative;

      // cursor: pointer;
      .left {
        .title {
          h3 {
            // color: #606266;
            cursor: pointer;
            font-weight: normal;
          }
          h3:hover {
            color: #617b97;
          }
        }
        .info {
          font-size: 14px;
          color: #828a92;
          span {
            margin-right: 45px;
            .icon {
              vertical-align: bottom;
              margin-right: 5px;
            }
          }
        }
      }
      .right {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        color: #828a92;
        cursor: pointer;
        padding-right: 20px;
        .go:hover {
          color: #409eff;
        }
      }
    }
    .content-item:hover {
      background-color: #fafafa;
    }
    .null {
      padding: 20px 0;
      text-align: center;
      border-bottom: 1px solid #eee;
    }
  }
  .footer {
    .el-pagination {
      justify-content: flex-end;
    }
  }
}
</style>
